<template>
  <div :class="{'bg-[#25272d]':theme!=='light','bg-[#a1a1a1]':theme=='light'}" class="text-white h-[60px] flex px-5 justify-between items-center">
    <div class="flex items-center text-xl">
      <img src="http://82.156.86.71:3000/logo.png" alt="logo" class="w-[46px] h-[46px] mr-2" />
      <span :style="{color:theme=='light'?'#000':'#FFF'}">巴特星球</span>
    </div>
    <div class="flex gap-2">
      <SvgIcon @click="tabdata" class="text-3xl cursor-pointer"
        :icon="theme == 'dark' ? 'ri:moon-foggy-line' : 'ri:sun-foggy-line'" />
      <div @click="gouserinfros">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <g fill="none" stroke="currentColor" stroke-dasharray="28" stroke-dashoffset="28" stroke-linecap="round"
            stroke-linejoin="round" stroke-width="2">
            <path d="M4 21v-1c0 -3.31 2.69 -6 6 -6h4c3.31 0 6 2.69 6 6v1">
              <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="28;0" />
            </path>
            <path d="M12 11c-2.21 0 -4 -1.79 -4 -4c0 -2.21 1.79 -4 4 -4c2.21 0 4 1.79 4 4c0 2.21 -1.79 4 -4 4Z">
              <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.4s" dur="0.4s" values="28;0" />
            </path>
          </g>
        </svg>
      </div>
      <div @click="openAbout" style="width:30px">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
          <path
            d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208s208-93.31 208-208S370.69 48 256 48zm0 319.91a20 20 0 1 1 20-20a20 20 0 0 1-20 20zm21.72-201.15l-5.74 122a16 16 0 0 1-32 0l-5.74-121.94v-.05a21.74 21.74 0 1 1 43.44 0z"
            fill="currentColor"></path>
        </svg>
      </div>
      <SvgIcon @click="openPrivacyPolicy" class="text-3xl cursor-pointer" icon="prime:file" />
      <SvgIcon @click="showModal = true" class="text-3xl cursor-pointer" icon="prime:bell" />
      <SvgIcon @click="logout" class="text-3xl cursor-pointer" icon="prime:sign-out" />
    </div>
  </div>
  <NModal title="通知公告" v-model:show="showModal" preset="card" style="width: 700px; height: 700px">
    <div class="markdown-box" v-html="text"></div>
  </NModal>
  <NModal title="关于" v-model:show="showAbout" preset="card" style="width: 700px; height: 700px">
    <div class="markdown-box" v-html="avouttext"></div>
  </NModal>
</template>
<script setup>
import { ref, computed, onMounted,watch } from "vue";
import { SvgIcon } from "@/components/common";
import { NModal } from "naive-ui";
import MarkdownIt from 'markdown-it'
import { fetchNotice, fetchAbout, fetchtoken, deletetoken, addToken,fetchSelf,updateToken  } from '@/api/index'
import { removeCookie } from '@/utils/cookie'
import { useRouter } from 'vue-router'
import { useAppStore, useUserStore } from '@/store'
import { gptServerStore } from '@/store'

const router = useRouter()

const md = MarkdownIt();
const showModal = ref(false);
const showAbout = ref(false)
const text = ref('');
const avouttext = ref('')
const appStore = useAppStore()
const theme = computed(() => appStore.theme)
// computed(()=>{
//   return md.render(`
//   # 体验公告
//   ### 欢迎体验AI，搭建同款站点请扫码咨询👊
//   ## 更新公告🧀 
//   1. V2.12.0更新：增加独立的积分消耗日志明细模块、优化可灵视频模型等 2024-12-05
//   2. 12:26:41 增加独立的积分消耗日志明细模块 增加日志消耗模块的顶部公告支持
//   3. 优化可灵视频模型的KEY配置判断 优化上个版本缺省的音乐积分不显示 更新公告
//   4. V2.11.1/2更新：修复Flux绘画自定义BaseURL未生效、优化提示等 2024-11-06 10:08:47
//   5. 修复flux自定义baseurl未生效问题 修复flux绘画的计费始终为1的问题 优化绘画配置提示
//   `)
// })
watch(() => gptServerStore.myData.OPENAI_API_BASE_URL , (n)=>{
   if(!gptServerStore.myData.IS_SET_SYNC) return  ;
    gptServerStore.myData.MJ_SERVER= n
    gptServerStore.myData.SUNO_SERVER=n;
    gptServerStore.myData.LUMA_SERVER=n;
    gptServerStore.myData.VIGGLE_SERVER=n;
    gptServerStore.myData.RUNWAY_SERVER=n;
    gptServerStore.myData.IDEO_SERVER=n;
    gptServerStore.myData.KLING_SERVER=n;
    gptServerStore.myData.PIKA_SERVER=n;
    gptServerStore.myData.PIXVERSE_SERVER=n;
    gptServerStore.myData.UDIO_SERVER=n;
});
watch(() => gptServerStore.myData.OPENAI_API_KEY , (n)=>{
    if(!gptServerStore.myData.IS_SET_SYNC) return  ;
    gptServerStore.myData.MJ_API_SECRET= n
    gptServerStore.myData.SUNO_KEY=n;
    gptServerStore.myData.LUMA_KEY=n;
    gptServerStore.myData.VIGGLE_KEY=n;
    gptServerStore.myData.RUNWAY_KEY=n;
    gptServerStore.myData.IDEO_KEY=n;
    gptServerStore.myData.KLING_KEY=n;
    gptServerStore.myData.PIKA_KEY=n;
    gptServerStore.myData.PIXVERSE_KEY=n;
    gptServerStore.myData.UDIO_KEY=n;
});
onMounted(async () => {
  const res = await fetchNotice();
  text.value = md.render(res.data);
  let body = document.createElement("body");
  text.value = text.value.substring(3, text.value.length - 6).replaceAll("&lt;", "<").replaceAll("&gt;", ">");
  body.innerHTML = text.value.substring(3, text.value.length - 6);
  const resdata = await fetchAbout();
  avouttext.value = resdata.data
  // console.log(resdata)
  // console.log("配置数据")
  // console.log(gptServerStore)
  let data = await fetchtoken();
  const userdata = await fetchSelf()
  if (data.data.length == 0) {
    await addToken({ "name": "APIKEY", "remain_quota": userdata.data.quota, "expired_time": -1, "unlimited_quota": false, "model_limits_enabled": false, "model_limits": "", "allow_ips": "", "group": "" })
    data = await fetchtoken();
  }
  // console.log(data)
  // 检测当前的用户余额是否和key保持一致
  if(data.data[0].remain_quota !== userdata.data.quota){
    // console.log("数据不一致")
    // console.log(data.data[0].remain_quota , userdata.data.quota)
    data.data[0].remain_quota  = userdata.data.quota
    await updateToken(data.data[0])
  }
  gptServerStore.myData.OPENAI_API_BASE_URL = "http://82.156.86.71:3000";
  gptServerStore.myData.OPENAI_API_KEY =data.data[0].key;
  // console.log(data)
})
function tabdata() {
  console.log(theme.value)
  appStore.setTheme(theme.value == 'dark' ? 'light' : "dark")
}
function logout() {
  removeCookie('session');
  router.push('/login')
}
const openPrivacyPolicy = () => {
  window.open('/#/helpbook', '_blank')
}
function gouserinfros() {
  router.push('/userinfo')
}
function openAbout() {
  showAbout.value = true;
}
</script>
<style>
.markdown-box * {
  all: revert;
}
</style>
